<template>
    <div style="height: 200px" :ref="id"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    props: {
        id: String,
        data: Object
    },
    data() {
        return {
            chart: null
        }
    },
    watch: {
        data: {
            handler(oldV, newV) {
                setTimeout(() => {
                    this.showChart(this.chart1, this.id, this.getOption1())
                }, 100);
            },
            immediate: true
        }
    },
    methods: {
        showChart(intance, id, option) {
            if (!intance) {
                intance = echarts.init(this.$refs[id]);
            } else {
                intance.clear();
            }
            intance.setOption(option);
        },
        getOption1() {
            let serie = {
                type: 'line',
            }
            return {
                title: {
                    text: this.data.title,
                    left: 0,
                    textStyle: {
                        color: '#FFF',
                        fontSize: 16,
                        fontWeight: 400
                    }
                },
                tooltip: this.getTooltipItem(),
                grid: {
                    bottom: 30,
                    top: 45,
                    left: 50,
                    right: 20
                },
                colors: ['#0884FF', '#64E6E2', '#FFA00A'],
                legend: {
                    icon: 'rect',
                    itemWidth: 8,
                    itemGap: 24,
                    itemHeight: 8,
                    textStyle: {
                        color: '#FFF',
                        fontSize: 16
                    },
                    top: 15
                },
                xAxis: {
                    data: this.data.list.map(e => e.name),
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisTick: {show: false},
                    name: '月份',
                    nameLocation: 'start',
                    nameTextStyle: {
                        color: '#FFF',
                        lineHeight: 28,
                        verticalAlign: "top",
                    },
                   
                    axisLine: {
                        show: false,
                    },
                    nameGap: 10
                },
                yAxis:[{
                    splitNumber: 5,
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 16,
                        padding: [0, 0, 0, 15]
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255, 0.16)',
                            type: 'dashed',
                            dashOffset: 2
                        }
                    },
                }],
                 series:[{
                    data: this.data.list.map(e => e.value),
                    yAxisIndex: 0,
                    lineStyle: {
                        color: `rgba(${this.data.color.r},${this.data.color.g},${this.data.color.b},1)`
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 0, color: `rgba(${this.data.color.r},${this.data.color.g},${this.data.color.b},0.0)`
                            }, {
                                offset: 0.8, color: `rgba(${this.data.color.r},${this.data.color.g},${this.data.color.b},0.3)`
                            }, {
                                offset: 1, color: `rgba(${this.data.color.r},${this.data.color.g},${this.data.color.b},0.4)`
                            }]
                        }
                    },
                    ...serie
                }] 
            }
        },
        getTooltipItem() {
            let unit = this.data.unit;
            return {
                borderWidth: 1,
                borderColor: 'rgba(8,132,255,0.4)',
                backgroundColor: 'rgba(2,32,61,0.72)',
                trigger: 'axis',
                formatter: function(params) {
                    console.log(params)
                    let child = '';
                    for(let i = 0; i < params.length; i++) {
                        child += `<div style="display:flex;align-items:center;color:#FFF;font-size:16px;padding:8px 0">

                        <div style="color:#64E6E2;padding:0 4px">${params[i].data}</div>
                        <div style="opacity:0.72">${unit}</div>
                        </div>`
                    }
                    return child;
                    
                }
            }
        },
    }
}
</script>
<style lang="less" scoped>

</style>